import React, { ReactElement } from 'react';
import { View, ViewStyle } from 'react-native';

import styles from './style';

export enum DashLineType {
  horizontal,
  vertical
}

interface DashLine {
  length?: number;
  type?: DashLineType;
  style?: ViewStyle;
  dashStyle?: ViewStyle;
  backgroundColor?: string;
}

export default ({
  length = 10,
  type = DashLineType.horizontal,
  style = {},
  dashStyle = {},
  backgroundColor
}: DashLine): ReactElement => {
  const points = Array(length).fill('');
  return (
    <View
      style={[
        type === DashLineType.horizontal ? styles.horizontal : styles.vertical,
        style
      ]}
    >
      {points.map(
        (): ReactElement => (
          <View style={[styles.point, { backgroundColor }, dashStyle]} />
        )
      )}
    </View>
  );
};
